<template>
  <div class="car-models">
    <el-row>
      <el-col :span="24">
        <div class="classOne">
          <!-- el-form表单 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <span style="margin-right: 10px">车型编号:</span>
                <el-input
                  v-model="addForm.id"
                  style="width: 300px"
                  type="text"
                  placeholder="请输入车型编号"
                  clearable
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <span style="margin-right: 10px">车型编号:</span>
                <el-select v-model="addForm.allowableLoad" placeholder="请选择应载重量" style="width: 300px">
                  <el-option
                    v-for="item in option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    clearable
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <span style="margin-right: 10px">车型体积:</span>
                <el-select v-model="addForm.allowableVolume" placeholder="请选择应载体积" style="width: 300px">
                  <el-option
                    v-for="item in optionTwo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    clearable
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="classOne-box">
                <span style="margin-right: 10px">车辆类型:</span>
                <el-input
                  v-model="addForm.name"
                  style="width: 300px"
                  type="text"
                  placeholder="请输入车辆类型"
                  clearable
                />

              </div>
            </el-col>
            <el-col :span="8">
              <div class="classOne-box">

                <el-button type="danger" @click="hChange">搜索</el-button>
                <el-button @click="hRset">重置</el-button>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="classTow">
          <div class="role-operate">
            <el-button type="primary" @click="open('add')">新增车型</el-button>
          </div>
          <el-table
            :data="list"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="70"
            />
            <el-table-column
              prop="id"
              label="车辆编号"
              width="280"
            />
            <el-table-column
              prop="name"
              label="车辆类型"
              width="180"
            />
            <el-table-column label="车型数量" width="150">
              <template v-slot="{ row }">
                <span v-if="row.num"> {{ row.num }} </span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="应载重量 (吨)"
              width="150"
            />
            <el-table-column
              prop="allowableVolume"
              label="应载体积 (立方米)"
              width="150"
            />
            <el-table-column
              prop="measureLong"
              label="长 (米)"
              width="100"
            />
            <el-table-column
              prop="measureWidth"
              label="宽 (米)"
              width="100"
            />
            <el-table-column
              prop="measureHigh"
              label="高 (米)"
              width="100"
            />
            <el-table-column label="操作" width="100px">
              <template v-slot="{ row }">
                <el-button size="mini" type="text" @click="open('edit', row.id)">编辑</el-button>
                <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 放置分页组件 -->
          <el-row type="flex" style="height:60px" align="middle" justify="end">
            <!-- 放置分页组件 -->
            <el-pagination
              :current-page="addForm.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="addForm.pageSize"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
            />
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 添加表单 -->
    <el-dialog
      :title="title[type]"
      :visible.sync="isShow"
      width="30%"
      :before-close="handleClose"
      custom-class="dialog-box"
    >
      <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">

        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>

        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="addForm.allowableLoad">
            <i
              slot="suffix"
              style="font-style: normal; margin-right: 10px"
            >吨</i>
          </el-input>
        </el-form-item>

        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="addForm.allowableVolume">
            <i
              slot="suffix"
              style="font-style: normal; margin-right: 10px"
            >立方</i>
          </el-input>
        </el-form-item>

        <el-form-item label="长" prop="measureLong">
          <el-input v-model="addForm.measureLong">
            <i
              slot="suffix"
              style="font-style: normal; margin-right: 10px"
            >米</i>
          </el-input>
        </el-form-item>

        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model="addForm.measureWidth">
            <i
              slot="suffix"
              style="font-style: normal; margin-right: 10px"
            >米</i>
          </el-input>
        </el-form-item>

        <el-form-item label="高" prop="measureHigh">
          <el-input v-model="addForm.measureHigh">
            <i
              slot="suffix"
              style="font-style: normal; margin-right: 10px"
            >米</i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="danger" size="medium" @click="hAddModels">确定</el-button>
              <el-button size="medium" @click="rest">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { postModels, getPageList, getArticle, putModels, delModels } from '@/api/car-models'
export default {
  name: 'CarModels',
  data() {
    return {
      clearable: false,
      option: [
        {

          label: '<1.8 (吨)'
        },
        {

          label: '1.8-6 (吨)'
        },
        {

          label: '6-14 (吨)'
        },
        {

          label: '14-30 (吨)'
        },
        {

          label: '30-50 (吨)'
        },
        {

          label: '50-100 (吨)'
        },
        {

          label: '100> (吨)'
        }
      ],
      optionTwo: [
        {

          label: '<3 (m³))'
        },
        {

          label: '<3-5 (m³)'
        },
        {

          label: '<5-10 (m³)'
        },
        {

          label: '<10-15 (m³)'
        },
        {

          label: '<15-30 (m³)'
        },
        {

          label: '30-50 (m³)'
        },
        {

          label: '<50-80 (m³)'
        },
        {
          value: 'RANGE_LEVEL_8',
          label: '<80-150 (m³)'
        },
        {
          value: 'RANGE_LEVEL_9',
          label: '150> (m³)'
        }
      ],
      type: 'add',
      title: {
        add: '添加车辆',
        edit: '编辑车辆'
      },
      isEdit: false,
      total: 11, // 总条数
      isShow: false,
      list: [],
      addForm: {
        page: 1, // 页数
        pageSize: 10, // 每一页的条数
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: '',
        goodsTypes: null,
        num: null
      },
      rules: {
        name: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '长不能为空', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '宽不能为空', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '高不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 封装分页
    this.getRole()
    // 封装获取车辆类型信息列表
  },
  methods: {
    hAdd() {
      // 显示添加表单
      this.isShow = true
    },
    async open(type, id) {
      console.log(type, id)
      this.type = type
      // 点击的时候 显示
      this.isShow = true
      // 发请求获取车辆详情
      if (type !== 'add') {
        const res = await getArticle(id)
        // console.log(res)
        // 数据回显
        this.addForm = res.data
      }
    },
    // 表单 确定
    async hAddModels() {
      this.$refs.addForm.validate()
      // 添加车辆
      if (this.type === 'add') {
        const res = await postModels(this.addForm)
        console.log(res)
        // 添加成功  提示用户
        // this.$message.success('添加成功')
        // //  重新渲染  Math.ceil() 向上取整
        // this.total = this.total + 1
        // this.page = Math.ceil(this.total / this.pagesize)
      }
      // 编辑车辆
      if (this.type === 'edit') {
        const res = await putModels(this.addForm)
        console.log(res)
        // 编辑成功 提示用户
        this.$message.success('编辑成功')
      }
      // 关闭弹框 清空表单
      this.closerDrawer()
      // 重新渲染
      this.getRole()
    },
    // 删除车辆
    async del(id) {
      const res = await delModels(id)
      console.log(res)
      // 提醒用户删除成功
      this.$message.success('删除成功')
      // 重新渲染
      this.getRole()
    },
    // 获取车辆类型分页数据
    async getRole() {
      const res = await getPageList(this.addForm)
      console.log(res)
      this.total = res.data.items.length
      this.list = res.data.items
    },
    // 点击添加表单 X
    handleClose() {
      console.log('点击X')
      this.closerDrawer()
    },
    // 点击取消 清空表单 退出弹框
    rest() {
      this.closerDrawer()
    },
    hCurrentChange(page) {
      // 每页的编码数
      console.log(page)
      // 更新页码
      this.page = page
      // 重新渲染
      this.getRole()
    },
    // 分页功能
    hSizeChange(page) {
      // 用户点击的哪条 page 数
      console.log(page)
      // 1. 更新每页显示的条数
      this.pagesize = page
      // 2. 更新页码为1
      this.page = 1
      // 重新渲染
      this.getRole()
    },
    // 封装 关闭弹框 清空表单
    closerDrawer() {
      // 关闭抽屉
      this.isShow = false
      // if (this.type !== 'preview') {
      //   this.$refs.form.resetFields()
      // }
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    // 搜索
    hChange() {
      this.getRole()
    },
    // 重置
    hRset() {
      this.addForm = {
        page: 1, // 页数
        pageSize: 10, // 每一页的条数
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: '',
        goodsTypes: null,
        num: null
      }
      this.getRole()
    }
  }
}
</script>

<style lang="scss">
.car-models {
  padding: 23px 20px 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
  padding: 20px;
  height: 140px;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.classOne {
  background: #fff;
  padding: 20px;
  height: 140px;
  border-radius: 4px;
  min-height: 36px;
  margin-bottom: 20px;
  .classOne-box {
    margin-top: 15px;
  }
}
.classTow {
  padding: 28px;
  background: #fff;
  border-radius: 4px;
  min-height: 36px;
}

.dialog-box {
  border-radius: 5px;
}

</style>
